<template>
  <div class="imgContainer">
    <div class="upload">
      <el-button size="mini"
                 type="primary"
                 @click="uploadbtn">上传图片</el-button>
      <p style="font-size:10px;color:#999;margin-left:10px">最多可发布5张照片</p>
    </div>
    <div class="previewPic">
      <div class="demo-image__preview"
           style="margin-right:10px"
           v-for="(item,index) in url"
           :key="index">
        <el-image :src="item"
                  style="width: 100px; height: 100px"
                  :preview-src-list="srcList">
        </el-image>
        <div class="handlebox">
          <img @click="arrowLeft(index)"
               :src="require('../../../public/img/placeholderimg/arrow_left.png')">
          <img @click="arrowDel(index)"
               :src="require('../../../public/img/placeholderimg/arrow_del.gif')">
          <img @click="arrowRight(index)"
               :src="require('../../../public/img/placeholderimg/arrow_right.png')">
        </div>
      </div>
    </div>
    <sel-file ref="selFile"
              @callback="selFileCallBack"
              albumCode="store"
              dialogTitle="选择图片"
              selectType="checkbox"
              selMaxWidth="300px"
              selMaxHeight="300px">
    </sel-file>
  </div>
</template>
<script>
import selFile from '@/components/file/selFile'
export default {
  data () {
    return {
      url: [],
      srcList: []
    }
  },
  components: {
    selFile
  },

  methods: {
    arrowLeft (idx) {
      //左移动
      if (idx == 0) {
        this.$message.warning('已经第一张了')
      } else {
        let arritem = this.url.splice(idx, 1)
        this.url.splice(idx - 1, 0, arritem)
      }
    },
    arrowRight (idx) {
      //右移动
      if (idx == this.url.length - 1) {
        this.$message.warning('已经最后一张了')
      } else {
        let arritem = this.url.splice(idx, 1)
        this.url.splice(idx + 1, 0, arritem)
      }
    },
    arrowDel (idx) {
      //删除
      this.url.splice(idx, 1)
    },
    uploadbtn () {
      this.$refs.selFile.open()
    },
    selFileCallBack (data) {
        //最多上传5张照片
        if(data.length>5){
            let urlArr=[];
            for(let i=0;i<5;i++){
                urlArr.push(data[i]);
            }
            this.url = urlArr;
            this.srcList = urlArr;
        }else{
            this.url = data;
            this.srcList = data;
        }


    },
		
		
		
  }
}
</script>
<style scoped>
.imgContainer {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-flow: column nowrap;
}
.upload {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.previewPic {
  display: flex;
  justify-content: space-around;
}
.handlebox {
  width: 100%;
  height: 15px;
  display: flex;
  justify-content: space-around;
}
.handlebox img {
  cursor: pointer;
}
</style>